<script setup lang="ts">
import { watchEffect, ref, watch} from "vue";
interface Props {
  msg: string;
  count?: number;
}
// 响应式props支持解构
const { count = 0 } = defineProps<Props>();
// useTemplateRef 
const fn = (): void => {
  console.log("fn, 打印传值了");
};
// 新增pause和resume方法
const sum = ref<number>(0);
const runner2 = watchEffect(() => {
  if (sum.value > 0) {
    console.log(sum.value, "sum");
  }
});

const obj1 = ref({
  a: {
    b: 1,
    c: {
      d: 2,
      e: {
        f: 4,
      },
    },
  },
});
// watch的deep选项值是3，表明监听到对象的第3层。watch的deep选项支持传入数字
watch(
  obj1,
  () => {
    console.log("监听到obj1变化", obj1.value);
  },
  {
    deep: 4,
  }
);
const changeDeep3Obj = (): void => {
  obj1.value.a.c.d += 1;
};
const changeDeep4Obj = (): void => {
  obj1.value.a.c.e.f += 2;
};

defineExpose({
  fn,
});
</script>

<template>
  <h5>{{ msg }}</h5>
  <div class="card">
    <button type="button">count is {{ count }}</button>
    <button @click="sum++">sum++</button>
    <!-- 有的场景中我们可能想在“一段时间中暂停一下”，不去执行watch或者watchEffect中的回调 -->
    <button @click="runner2.pause()">暂停</button>
    <button @click="runner2.resume()">恢复</button>
    <button @click="changeDeep3Obj">3层 - {{ obj1.a.c.d }}</button>
    <button @click="changeDeep4Obj">4层 - {{ obj1.a.c.e.f }}</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
